<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>react_form</title>

        <!-- 引入react核心库 -->
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <!-- 银日 react-dom 用于支持 react 操作 DOM -->
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- 引入 bable ,用于 Jsx 转为 Js -->
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

    <script type="text/babel">
        class Login extends React.Component{
            // 非受控组件
            render(){
                return(
                    <form action="http://www.baidu.com">
                        用户名：<input type="text" name="username"/>
                        密码：<input type="password" name="password"/>
                        <button>登录</button>
                    </form>
                )
            }
        }
        ReactDOM.render(<Login/>,document.getElementById("test"))
    </script>

    <script type="text/babel">
        class Register extends React.Component{
            // 受控组件
            state = {
                username:'',
                password:'',
            }

            handleSubmit = (event) =>{
                event.preventDefault() //阻止表单提交
            }

            /*
            * 高阶函数：若函数接收的参数是一个函数或者调用的的返回值依然是个函数，那该函数就是告诫函数
            * 函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数后统一处理的函数编码形式
            * */
            savaFormData = (dataType) => {
                return (event) => {
                    console.log(dataType,event.target.value)
                    this.state({
                        [dataType]:event.target.value
                    })
                }
            }
            render(){
                return(
                    <form action="http://www.baidu.com" onSubmit={this.handleSubmit}>
                        用户名：<input onChange={this.savaFormData('username')} type="text" name="username"/>
                        密码：<input onChange={this.savaFormData('password')} type="password" name="password"/>
                        <button>登录</button>
                    </form>
                )
            }
        }
        ReactDOM.render(<Register/>,document.getElementById("test2"))
    </script>

    <script type="text/babel">
        class Register extends React.Component{
            // 受控组件
            state = {
                username:'',
                password:'',
            }

            handleSubmit = (event) =>{
                event.preventDefault() //阻止表单提交
            }

            savaFormData = (dataType,event) => {
                    console.log(dataType,event.target.value)
                    this.state({
                        [dataType]:event.target.value
                    })
            }
            render(){
                // 箭头函数左侧只有一个参数括号可以省略
                // 箭头函数花括号内只有一句语法，括号可以省略
                return(
                    <form action="http://www.baidu.com" onSubmit={this.handleSubmit}>
                        用户名：<input onChange={ event => this.savaFormData('username',event) } type="text" name="username"/>
                        密码：<input onChange={ event => this.savaFormData('password',event) } type="password" name="password"/>
                        <button>登录</button>
                    </form>
                )
            }
        }
        ReactDOM.render(<Register/>,document.getElementById("test3"))
    </script>
</head>
<body>
    <div id="test"></div>
    <div id="test2"></div>
    <div id="test3"></div>
    <div id="test4"></div>
</body>

<script type="text/babel">
    class Life extends React.Component{
        state = {opacity:1}

        death = () => {
            // // 清楚定时器
            // clearInterval(this.timer)
            // 卸载组件
            ReactDOM.unmountComponentAtNode(document.getElementById('test4'))
        }
        // 组件挂载完毕后执行
        componentDidMount() {
            // 定时器，状态更新
            this.timer = setInterval(() => {
                let {opacity} = this.state
                opacity -= 0.1
                if (opacity <= 0) {
                    opacity = 1
                }
                this.setState({opacity})  // {opacity: opacity} 这样 KEY 与 VALUE一致时可以简写成{opacity}
            }, 200)
        }
        // 组件将要卸载的时候执行
        componentWillUnmount(){
            // 清楚定时器
            clearInterval(this.timer)
        }

        render(){
            return(
                <div>
                    <h2 style={{ opacity:this.state.opacity }}>React学不会哇</h2>
                    <button onClick={this.death}>不活了</button>
                </div>
            )
        }
    }
    ReactDOM.render(<Life/>,document.getElementById("test4"))
</script>
</html>